<template>
  <div class="student">
    <h3>学生名称：{{ name }}</h3>
    <h3>性别：{{ sex }}</h3>
    <button @click="sendStudentName">学生发送</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "李白",
      sex: "女",
    };
  },
  methods: {
   sendStudentName() {
      this.$bus.$emit("demo", this.name);
    },
  },
};
</script>
// scoped 作用域样式，只作用于当前组件
<style scoped lang="css">
.student {
  background-color: orange;
  padding: 5px;
  margin: 5px;
}
</style>